<template>
  <div>
    <nav class="navbar navbar-expand-sm bg-light navbar-light fixed-top">
      <a class="navbar-brand" href="#">贝尔宾团队角色测试结果</a>
    </nav>
    <nav class="navbar navbar-expand-sm bg-light navbar-light fixed-bottom">
      <span class="navbar-text" style="color:lightgrey">成都终端管制室 创新工作室 2021</span>
      <ul class="navbar-nav">
        <li class="nav-item">
          <button type="button" class="btn btn-dark" @click="goNext">下一步</button>
        </li>
      </ul>
    </nav>
    <div class="container-fluid" style="margin-top:20px;margin-bottom:80px;text-align:left;">
      <table class="table">
        <tbody>
          <tr
            v-for="item in score"
            :key="item.id"
            :class="{'table-primary':(item.value==maxValue)}"
          >
            <td>{{item.type}}</td>
            <td>{{item.value}}</td>
          </tr>
        </tbody>
      </table>
      <!-- <p style="color:lightgrey;font-size:0.8em">成都终端管制室 创新工作室 2021</p> -->
    </div>
  </div>
</template>

<script>
export default {
  name: "FinalView",
  data() {
    return {
      //
      score: [],
      maxValue: 0
    };
  },
  computed: {
    devMode() {
      return this.$store.state.devMode;
    },
    description() {
      return this.$store.state.description;
    }
  },
  methods: {
    //
    initValue() {
      this.score = [];
      for (let i = 0; i < this.$store.state.baseData[0].options.length; i++) {
        this.score.push({
          type: this.$store.state.baseData[0].options[i].type,
          value: 0
        });
      }
    },
    calcValue() {
      for (let i = 0; i < this.score.length; i++) {
        for (let j = 0; j < this.$store.state.scoreData.length; j++) {
          for (let k = 0; k < this.$store.state.scoreData[j].length; k++) {
            if (this.score[i].type == this.$store.state.scoreData[j][k].type) {
              this.score[i].value += this.$store.state.scoreData[j][k].value;
            }
          }
        }
        if (this.maxValue < this.score[i].value) {
          this.maxValue = this.score[i].value;
        }
      }
    },
    commitScore() {
      this.$store.commit("setValueBelbin", this.score);
    },
    goNext() {
      this.$store.commit("routerNext");
      this.$router.push(this.$store.state.routerData.nextView);
      if (this.devMode) {
        window.console.log(this.$store.state.routerData.nextView);
      }
    }
  },
  mounted() {
    //
    this.initValue();
    this.calcValue();
    this.commitScore();
    if (this.devMode) {
      window.console.clear();
      window.console.log(JSON.stringify(this.$store.state.belbinScore));
    }
  }
};
</script>

<style scoped>
</style>